<!-- 门店首页 -->
<template>
	<view class="page">
		<status-bar :title="title" :goHome='fromShare'></status-bar>
		<backTop v-if='toTop'></backTop>
		<view class="storeSwipeBox" v-if='shopData.merMemo'>
			<swiper @change="swipeChange" class="storeSwipe" circular :autoplay="true" :interval="3000" :duration="1000">
				<swiper-item v-for="(item,index) in shopData.merMemo" :key='index'>
					<view class="swiper-item" @click="previewImage(index,shopData.merMemo)">
						<image :src="imgUrl+item" mode="aspectFill"></image>
					</view>
				</swiper-item>
			</swiper>
			<view class="swipe-dots">{{currentIndex+1}}/{{shopData.merMemo.length}}</view>
		</view>
		<view class="storeItem flex-box align-center">
			<image class="storeLogo" :src="shopData.logo?imgUrl+shopData.logo:staticUrl+'/images/imageLoading.png'" mode="aspectFill"></image>
			<view class="flex storemsg">
				<view class="lines storeTitle">{{shopData.name}}</view>
				<!-- <view class="lines storeType" v-if='shopData.phone' @click="makePhone">
					<text class="iconfont icon-dianhua"></text>
					<text class="tel">{{ shopData.phone }} {{shopData.telExtension}}</text>
				</view>
				<template v-else> -->
					<view class="lines storeType" v-if='shopData.bussName'>经营类别：{{shopData.bussName}}</view>
				<!-- </template> -->
				<view class="lines storeType" v-if='shopData.address' @click="goo">
					<text class="iconfont icon-B"></text>
					<text>{{shopData.address}}</text>
				</view>
			</view>
			<!-- <view class="phoneBox thmeBg flex-box align-center" :style="{'--color': color}" @click="makePhone" v-if='shopData.phone'>
				<text class="iconfont icon-dianhua"></text>
			</view> -->
			
			<view class="collect-box flex-box">
				<view class="collect" @click="storeCollect">
					<text v-if='shopData.collect == 1' class="iconfont icon-01"></text>
					<text v-else class="iconfont icon-02"></text>
					<view class="rtxt">{{shopData.collect == 1?'已关注':'加关注'}}</view>
				</view>
			</view>
			
		</view>
		<view class="flex-box searchBox">
			<view class="search flex flex-box align-center">
				<text class="icon-btn_search iconfont"></text>
				<input type="text" class="flex" confirm-type="search" @confirm="confirmSearch" placeholder="请输入搜索关键词"/>
			</view>
			<navigator :url="'/otherPage/store/classifys?shopid='+shopId+'&name='+shopData.name" hover-class="none">
				<view class="icons" v-if='!searchState'>
					<text class="iconfont icon-fenlei thmeColor" :style="{'--color': color}"></text>
					<view>分类</view>
				</view>
			</navigator>
			<view class="icons" v-if='searchState' @click="all">
				<text class="iconfont icon-cangpeitubiao_shangpin thmeColor" :style="{'--color': color}"></text>
				<view>全部</view>
			</view>
		</view>
		<view class="fixedLine"></view>
		<view class="goodsTabs flex-box align-center" :style="{top:fixedTop?navHeight+'px':0}">
			<view class="flex flex-box align-center">
				<view class="goodsTabItem flex-box align-center" :class="{active:rankTab==index}" v-for="(item,index) in rank" :key='index' @click="chkRanks(index,item.type)">
					<text class="gdtxt" :class="{thmeColor:rankTab==index}" :style="{'--color': color}">{{item.txt}}</text>
					<view class="jiantouBox flex-box" v-if='index==1'>
						<text class="icon-shangsanjiaoxing iconfont" :class="{thmeColor: state == 1 && rankTab == 1}" :style="{'--color': color}"></text>
						<text class="icon-xiasanjiaoxing iconfont" :class="{thmeColor: state == 2 && rankTab == 1}" :style="{'--color': color}"></text>
					</view>
				</view>
			</view>
			<view class="changeBtn">
				<image v-if='listType == 2' @click="waterfall" :src="staticUrl+'/images/menu2_ico.png'" class="changeIcon"></image>
				<image v-if='listType == 1' @click="listType = 2" :src="staticUrl+'/images/menu_ico.png'" class="changeIcon"></image>
			</view>
		</view>
		
		
		<view v-show='listType==1 && goodsData' class="goodsBox">
			<GoodsList hot='1' v-if='goodsData.length > 0' :goodsData='goodsData' type='1'></GoodsList>
			<view class="DiLine" v-if='showLine'>------  我也是有底线的  ------</view>
		</view>
		<view v-show='listType==2' class="goodsBox">
			<GoodsList hot='1' v-show='goodsData' :goodsData='goodsData' type='2'></GoodsList>
			<view class="DiLine" v-if='showLine'>------  我也是有底线的  ------</view>
		</view>
		<empty type='1' v-if='noData' cat='4' msg='还没有相关商品哦~'></empty>
		<showModel @cancelFunc='closeModel' goHome='0' v-if='showModal' type='2'></showModel>
	</view>
</template>

<script>
	var that;
	import GoodsList from '../../components/goodsList.vue'
	export default {
		components:{GoodsList},
		data() {
			return {
				showModal: false,
				navHeight:getApp().globalData.navHeight,
				toTop: false,
				color: getApp().globalData.color,
				imgUrl: this.imgUrl,
				staticUrl: this.staticUrl,
				// 排序方式tab切换 start
				rankTab:0,
				shopId:'',
				shopData:'',
				
				rank:[
					{txt:'综合',type:''},
					{txt:'价格',type:1},
					{txt:'销量',type:2},
					{txt:'热度',type:3},
					{txt:'好评',type:4}
				],
				fixedTop:false, // 是否固定tab栏
				topHeight: 44,//获取顶部搜索框的高度 
				bid: uni.getStorageSync('bid'),
				currentIndex:0,
				listType:'1',
				goodsData: [],
				page:1,
				state: 0,// 价格排序方式 1从高到底 2从低到高
				type: '',
				noData: false,
				searchTxt:"",
				searchState: false,
				loadMore:false, // 是否上拉加载更多
				showLine: false,
				storeName: uni.getStorageSync('startUp').nameDefinition.storeDefinitionName,
				title:' ',
				fromShare:0, // 是否来自分享 1是 显示返回首页
			}
		},
		onLoad(opts) {
			that = this
			that.storeName = that.storeName?that.storeName:"店铺"
			if(opts.shop_id){
				that.shopId = opts.shop_id;
				that.getShopData();
				that.getSingle()
			}
			if(opts.fromShare){that.fromShare = opts.fromShare}	
		},
		onPageScroll(e) {
			that.scrolltop = e.scrollTop
			if (e.scrollTop > 200) {
				that.toTop = true;
			} else {
				that.toTop = false
			}
			uni.createSelectorQuery().select(".fixedLine").boundingClientRect((res) => {
				if(res.top <1){
					that.fixedTop = true;
				}else{
					that.fixedTop = false;
				}
			}).exec();
		},
		onReachBottom() {
			if(that.loadMore){
				that.getSingle()
			}
		},
		onShareTimeline() {
			let vid = uni.getStorageSync('vid');
			return {
				title: that.shopData.name,
				path: '/pages/index/index?share_v_id=' + vid+'&pageType=15&shop_id='+that.shopId,
				imageUrl: that.imgUrl + that.shopData.logo
			}
		},
		onShareAppMessage(option) {
			let vid = uni.getStorageSync('vid');
			return {
				title: that.shopData.name,
				desc: that.shopData.address,
				path: '/pages/index/index?share_v_id=' + vid+'&pageType=15&shop_id='+that.shopId,
				imageUrl: that.imgUrl + that.shopData.logo
			}
		},
		methods: {
			closeModel(){
				that.showModal=false;
				that.getShopData()
			},
			previewImage(index){
				let arr = [];
				for (let i in that.shopData.merMemo) {
					arr.push(that.imgUrl + that.shopData.merMemo[i])
				}
				uni.previewImage({
					current: index,
					urls: arr,
					indicator: "number",
					loop: true
				})
			},
			goo(){
				var that = this;
				if(that.shopData.latitude){
					uni.openLocation({
					    latitude: parseFloat(that.shopData.latitude),
					    longitude: parseFloat(that.shopData.longitude),
						name: that.shopData.address,
						address: that.shopData.address,
					    success: function () {
					        console.log('openLocation');
					    }
					})
				}
			},
			makePhone(){
				uni.makePhoneCall({
					phoneNumber:this.shopData.phone
				})
			},
			waterfall(){
				that.listType = 1
				that.goodsData = []
				that.page = 1;
				that.getSingle()
				
			},
			all(){
				this.chkRanks(0);
				//this.getSingle()
			},
			swipeChange(e){
				this.currentIndex = e.detail.current
			},
			getShopData(){//获取店铺信息
				that.$http.post({
					url: '/singleSaleApi/storesIndex',
					data: {
						shop_id: that.shopId,
						bid: that.bid,
						v_id: uni.getStorageSync('vid')
					}
				}).then(res => {
					if (res.code == 100 && res.data) {
					    that.shopData = res.data;
						that.title = that.shopData.name?that.shopData.name:that.storeName+'首页'
						uni.setNavigationBarTitle({
							title: that.title
						}) 
					}
					// #ifdef H5
					this.H5Share('pageType=15&shop_id='+that.shopId,{
						title: that.shopData.name,
						desc: that.shopData.address,
						imageUrl: that.imgUrl + that.shopData.logo
					})
					// #endif
				})
			},
			getSingle() { // 店铺商品排序
				that.loadMore = false
				that.showLine = false
				that.noData = false
			     that.$http.post({
			     	url: '/singleSaleApi/storeGoodsGroups',
			     	data: {
			     		shop_id: that.shopId,
						v_id: uni.getStorageSync('vid'),
			     		bid: that.bid,
			     		type: that.type, // 1价格排序 2销量排序  3热度排序
			     		state: that.state, // 1 价格从低到高 2价格从高到低 
			     		page: that.page,
			     		pageNum: 10,
			     	}
			     }).then(res => {
			     	if (res.code == 100 && res.data) {
			     		that.goodsData = that.goodsData.concat(res.data);
			     	    if(res.data.length > 9){
			     	        that.loadMore = true
							that.page ++
			     	    }
			     	}
					if(that.goodsData.length<1){
					    that.noData = true;
					}
					if(that.goodsData && that.goodsData.length > 9 && (!res.data || res.data.length < 10)){
						that.showLine = true
					}
			     })
			},
			chkRanks(index,type){
				// if(that.searchState){
				// 	return
				// }
				that.goodsData = []
				that.page = 1;
				if(index == 1){
					that.state = that.state==1?2:1;
				}else{
					that.state = 0;
				}
				that.rankTab = index;
				that.type = type;
				that.searchState = false;
				that.getSingle()
			},
			confirmSearch(e){
				if(e.detail.value){
					that.rankTab = -1;
					that.searchState = true;
					that.searchTxt = e.detail.value;
					that.page = 1;
					that.type = 1;
					that.$http.post({
						url: '/singleSaleApi/searchStoreGoods',
						data: {
							shop_id: that.shopId,
							bid: that.bid,
							name: that.searchTxt,
							v_id: uni.getStorageSync('vid'),
						}
					}).then(res => {
						that.goodsData = [];
						if (res.status && res.data) {
						    that.noData = false;
						    that.goodsData = res.data;
						}else{
						    that.noData = true;
						}
					})
				}else{
					uni.showToast({
						title:'请先输入搜素关键词哦',
						icon:'none'
					})
				}
			},
			storeCollect(){ // 收藏商品
				var vid = uni.getStorageSync("vid")
				if (!vid || vid == 0) {
					that.showModal = true
					return
				}
				that.$http.post({
					url: '/singleSaleApi/store_collect',
					data: {
						v_id: vid,
						bid: that.bid,
						store_id: that.shopId
					}
				}).then(res => {
					
					if(res.code == 200){
						if(that.shopData.collect == 0){
							that.shopData.collect = 1
						}else{
							that.shopData.collect = 0
						}
					}else{
						uni.showToast({
							title: res.msg,
							icon:'none'
						})
					}
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.goodsBox{
		background-color: #FFFFFF;
		padding: 24rpx 0;
	}
	.goodsTabs{
		.goodsTabItem{
			padding: 0 30rpx;
			.jiantouBox{
				flex-direction: column;
				margin-left: 6rpx;
				.icon-shangsanjiaoxing,.icon-xiasanjiaoxing{
					font-size: 20rpx;
					margin: -4rpx 0;
					color: #AFAFAF;
				}
			}
		}
		.changeBtn{
			padding: 0 30rpx;
			image{width: 44rpx;height: 44rpx;}
		}
	}
	.storeSwipeBox{
		position: relative;
		.storeSwipe{
			height: 375rpx;
			.swiper-item,swiper-item image{width: 100%;height: 100%;}
		}
		.swipe-dots{
			position: absolute;
			padding: 0 20rpx;
			line-height: 36rpx;
			border-radius: 20rpx 0 0 20rpx;
			color: white;
			background: rgba(0,0,0,.5);
			right: 0;
			bottom: 30rpx;
		}
	}
	.storeItem{
		padding: 30rpx 24rpx;
		background-color: #FFFFFF;
		border-bottom: 4rpx solid #F5F5F5;
		.storeLogo{
			border-radius: 50%;
			width: 140rpx;
			height: 140rpx;
			margin-right: 30rpx;
		}
		.storeTitle{
			font-size: 26rpx;
			color: #222222;
			margin-bottom: 16rpx;
		}
		.storeType{
			color: #999;margin-top: 6rpx;
			text{color: #999;}
			.icon-dianhua{
				font-size: 34rpx;
				margin-right: 10rpx;
			}
			.icon-B{
				font-size: 36rpx;
				margin-right: 10rpx;
				position: relative;
				top: 6rpx;
			}
			.tel{
				font-size: 28rpx;
			}
		}
		.collect-box{
			>view{
				text-align: center;
				width: 80rpx;
				height: 80rpx;
			}
			.rtxt{font-size: 22rpx;color: #666666;margin-top: -4rpx;}
			@keyframes cc{
				0%{transform: scale(0.5);}
				50%{transform: scale(1.2);}
				100%{transform: scale(1);}
			}
			.icon-02,.icon-01{
				font-size: 38rpx;
				color: #666666;
			}
			.icon-01{
				color: $uni-color-follow;
				animation: cc .4s ease-in-out;
			}
			.icon-fenxiang1{
				font-size: 40rpx;
				color: #666666;
			}
			.iconfont{
				display: inline-block;
				height: 50rpx;
			}
		}
	}
	.searchBox{
		background: #FFFFFF;
		padding: 30rpx;
		.search{
			background: #F5F5F5;
			padding: 0 16rpx;
			border-radius: 40rpx;
			.icon-btn_search{
				font-size: 40rpx;
				margin-right: 10rpx;
				color: #999999;
			}
		}
		.icons{
			padding-left: 30rpx;
			text-align: center;
			.icon-fenlei,.icon-cangpeitubiao_shangpin{
				font-size: 40rpx;
			}
		}
	}
	
	
	
	.phoneBox{
		position: fixed;
		right: 24rpx;
		bottom: 250rpx;
		margin-bottom: constant(safe-area-inset-bottom);
		margin-bottom: env(safe-area-inset-bottom);
		border-radius: 50%;padding: 20rpx;align-self:flex-start;
		z-index: 33;
		.icon-dianhua{width: 40rpx;height: 40rpx;font-size: 40rpx;color: white;}
	}

</style>
